<template>
  <div class="list-view" v-loading="loading">
    <div class="list-container" v-if="list && list.length > 0">
      <div class="card" v-for="(item, key) in list" :key="key">
        <div @click="showDialog(item, key)" class="item">
          <div class="top-img">
            <img v-lazy="item.cover" alt />
          </div>
          <div class="infoView">
            <div class="title">{{ item.work_name }}</div>
            <div class="tit" v-html="$decodeHtmlEntities(item.description).replace(/&nbsp;/g, '')"></div>
            <div class="user-info">
              <div class="ava">
                <img :src="item.avatar || defaultImg" alt />
              </div>
              <div class="username" style="color:#4c4c4c">{{ item.username }}</div>
            </div>
          </div>

          <div class="status-box">
            <div class="pinjia" v-if="item.star">
              <el-rate
                v-model="item.star"
                disabled
                :colors="colors"
                score-template="{value}"
              ></el-rate>
            </div>
            <div class="pinjia" v-else>
              <div class="pxBtn" @click="showDialog(item, key)">去评星</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else><no-data></no-data></div>
    <el-dialog
      :visible.sync="showdialogDetail"
      :before-close="beforeClose"
      :close-on-click-modal="false"
      lock-scroll
    >
      <div @click="prevWork" v-show="currentIndex > 0" class="arrow-left">
        <img src="@/assets/home/arrow-left.png" alt />
        <div class="text">上一作品</div>
      </div>
      <div class="popbox" v-if="currentIndex !== null">
        <div class="pop-left">
          <div class="info-view">
            <div class="left-top">
              <div class="info-title">{{ list[currentIndex].work_name }}</div>
            </div>
            <div class="left-center">
              <div class="userInfo-box">
                <div class="ava-box">
                  <img :src="list[currentIndex].avatar || defaultImg" alt />
                </div>
                <div class="username" style="color:#4c4c4c">{{ list[currentIndex].username }}</div>
              </div>
              <div class="description">
                <div v-html="$decodeHtmlEntities(list[currentIndex].description).replace(/&nbsp;/g, '')" class="desc"></div>
              </div>
            </div>
          </div>
          <div class="img-list">
            <!-- <img v-lazy="list[currentIndex].cover" alt /> -->
             <el-image
              v-for="(url, index) in workImages"
              :key="index"
              :src="url"
              :preview-src-list="workImages"
              style="width:100%; display: block;"
            >
            </el-image>
          </div>
        </div>
        <div class="pop-right">
          <div class="right-box">
            <h1 class="work-title">作品状态</h1>
            <div class="img-status" v-if="list[currentIndex].star">
              <img src="@/assets/home/Reviewed.png" alt />
            </div>
            <div class="img-status" v-else>
              <img src="@/assets/home/not-reviewed.png" alt />
            </div>
          </div>
          <div class="right-box">
            <h1 class="work-title">
              作品评星
              <span style="color: red">*</span>
            </h1>
            <el-rate v-model="star"  :colors="colors1" :low-threshold="1" :high-threshold="starLevel"></el-rate>
          </div>
          <div class="right-box">
            <h1 class="work-title">作品评语</h1>
            <div class="enter-top">
              <el-input
                type="textarea"
                   :autosize="{ minRows: 3,}"
                maxlength="100"
                placeholder="请填写评语"
                v-model="comment"
              ></el-input>
            </div>
            <div class="enter-bottom">
              <el-button class="button1" @click="toCancel(currentIndex)">提交</el-button>
            </div>
          </div>
        </div>
      </div>
      <div @click="nextWork" v-show="currentIndex < list.length - 1" class="arrow-right">
        <img src="@/assets/home/arrow-right.png" alt />
        <div class="text">下一作品</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import { mapGetters } from "vuex";
import NoData from "../../../components/Nodata.vue";
import { getEditSec } from "@/api/index";
export default {
  name: "CreateList",
  components: {
    NoData,
  },
  data() {
    return {
      colors: ["#4d4d4d", "#4d4d4d", "#4d4d4d"],
       colors1:[ "#e6e6e6","#00bfd66","#00bfd6"],
      isPx: false, //是否评星
      loading: false,
      showdialogDetail: false, // 弹窗预览详情
      currentIndex: null, //切换值

      // 图片报错加在默认图片
      defaultImg: require("@/assets/default-header.png"),
      star: null,
      comment: null,
    };
  },
   computed: {
    workImages() {
      try {
        return JSON.parse(this.list[this.currentIndex].work_images) || [];
      } catch (e) {
        console.error("Failed to parse work_images:", e);
        return [];
      }
    }
  },
  methods: {
    toCancel(key) {
      if (!this.star || this.star == "") {
        this.$message.error("需要给予评星，才能提交");
        return false;
      }
      let params = {
        star: this.star,
        ids: this.list[key].work_id,
        comment: this.comment,
      };
      getEditSec(params)
        .then((res) => {
          if (res.code === 0) {
            // this.star = null;
            // this.comment = null;
            this.$message.success(res.msg);
            this.$emit("onUpdate"); // 传递操作结果给父组件
          } else {
            this.$message.error("提交失败，请稍后再试");
          }
        })
        .catch((err) => {
          this.$message.error("提交失败，请稍后再试");
        });
    },
    beforeClose() {
        this.currentIndex=null
      this.star = null;
      this.comment = null;
      this.$emit("onUpdate");
      this.showdialogDetail = false;
    },

    // 显示弹窗
    showDialog(item, index) {
      // this.list = [item];
      this.currentIndex = index;
      this.showdialogDetail = true;
      this.star = this.list[index].star;
      this.comment = this.list[index].comment;
    },
    prevWork() {
      this.currentIndex--;

      if (this.currentIndex < 0) {
        this.currentIndex = this.list.length - 1;
      }

      this.star = this.list[this.currentIndex].star;
      this.comment = this.list[this.currentIndex].comment;
    },
    nextWork() {
      this.currentIndex++;

      if (this.currentIndex >= this.list.length) {
        this.currentIndex = 0;
      }
      this.star = this.list[this.currentIndex].star;
      this.comment = this.list[this.currentIndex].comment;
    },
  },

  // props: ["list", "level"],
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    starLevel: {
      type: Number,
     
    }
  },
};
</script>
<style scoped>
>>>.el-image__preview{
cursor: zoom-in;
}
>>> .el-image-viewer__mask {
  opacity: 1;
}
>>> .el-image__inner {
  margin-bottom: 15px;
}
.list-view {
  width: 100%;
}
.list-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1720px;
  margin:40px auto ;
}
.card {
  width: 328px;
  background: #fff;
  overflow: hidden;

  display: inline-block;
  position: relative;
  margin: 0 20px 20px 0;
  z-index: 0;
}
.card:nth-child(5n) {
  margin-right: 0;
}
.card .item {
  cursor: pointer;
}
.card .top-img {
  position: relative;
  width: 328px;
  height: 226px;
  display: block;
  border-radius: 6px;
  background: #e5e5e5;
}
.card .top-img img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}
>>>.card .infoView .title {
  line-height: 20px;
  color: #1a1a1a;
  font-weight: 500 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 20px;
}
>>> .card .infoView .tit {
  height: 36px;
  margin: 14px 0;
  font-size: 14px;
  line-height: 18px;
  color: #4d4d4d !important;
  font-weight: 500 !important;
  white-space: wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
>>>.card .infoView .tit p,
>>>.card .infoView .tit p>b,
>>>.card .infoView .tit p>strong{
   font-size: 14px;
  line-height: 18px;
  color: #4d4d4d !important;
  font-weight: 500 !important;
}
.card .infoView {
  margin: 16px 0;
}
.card .infoView .user-info {
  display: flex;
  align-items: center;
}
.card .infoView .user-info .ava {
  width: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 50%;
  margin-right: 10px;
}
.card .infoView .user-info img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.status-box {
  margin: 20px 0;
  display: flex;
  align-items: center;
}
.status-box .isOk,
.status-box .isOut {
  cursor: pointer;
  color: #1a1a1a;
  width: 120px;
  height: 38px;
  background: #f3f4f3;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.status-box .isOk {
  margin-right: 20px;
}
.status-box .isOk .round,
.status-box .isOut .round {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #666666;
  margin-right: 10px;
}
.status-box .isOk .txt,
.status-box .isOut .txt {
  font-size: 16px;

  line-height: 18px;
}
.status-box .isOk.active,
.status-box .isOut.active {
  color: #fff;
  background: #00bfd6;
}
.status-box .isOk.active > .round,
.status-box .isOut.active > .round {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  box-sizing: border-box;
  padding: 1px;
  background: transparent;
}

.status-box .isOk.active > .round .inner-round,
.status-box .isOut.active > .round .inner-round {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}
.pinjia .pxBtn {
  width: 120px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  background: #00bfd6;
  border-radius: 6px;
  cursor: pointer;
}
.start-box {
  display: flex;
}
.start-box .pinjia .pfBtn {
  width: 120px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  background: #00bfd6;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 20px;
}
.start-box .pinjia .ispfBtn {
  width: 120px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 16px;
  color: #7a7a7a;
  background: #f4f4f4;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 20px;
}
.start-box .xingji .isxjBtn {
  width: 120px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 16px;
  color: #7a7a7a;
  background: #f4f4f4;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 20px;
}
.start-box .xingji .xjBtn {
  width: 120px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 16px;
  color: #00bfd6;
  background: #f4f4f4;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 20px;
}
.swiper-top {
  height: 100%;
}
>>> .el-dialog__body {
  padding: 0;
}
.popbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.pop-left {
  position: relative;
  width: 1200px;
  height: auto;
  margin: 0 auto;
  padding-bottom: 100px;
  box-sizing: border-box;
  background-color: #fff;
}
.pop-left .info-view {
  padding: 70px 100px 60px;
}
.pop-left .left-top .info-title {
  font-size: 40px;
  color: #000000;
  line-height: 32px;
}
.pop-left .left-center .userInfo-box {
  display: flex;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 30px;
}
.pop-left .left-center .userInfo-box .ava-box {
  width: 40px;
  height: 40px;
  margin-right: 10px;
   border-radius: 50%;
   overflow: hidden;
  background: #ffffff;
}
.pop-left .left-center .userInfo-box .ava-box img {
   width: 100%;
  height: 100%;
  display: block;
   border-radius: 50%;
}
.pop-left .left-center .userInfo-box .username {
  font-size: 16px;
  color: #4c4c4c;
}
.pop-left .description {
  font-size: 20px;
  color: #000000;
  line-height: 32px;
}
.pop-left .img-list img {
  display: block;
  width: 100%;
  height: auto;
  margin: 10px auto;
}
.pop-left .status-box {
  margin: 40px auto;
  justify-content: center;
}
.popbox .pop-right {
  margin-left: 20px;
  box-sizing: border-box;
  width: 400px;
  max-height: 1100px;
  background-color: white;
  padding: 60px 30px;
}
.popbox .pop-right .right-box {

  margin-bottom: 60px;
}
.popbox .pop-right .right-box:first-child {
  border-bottom: 1px solid #eee;
}
.popbox .pop-right .right-box h1 {
  font-weight: 400;
  font-size: 24px;
  color: #1a1a1a;
  padding-bottom: 20px;
}
.popbox .pop-right .right-box .img-status {
  width: 122px;
  height: 96px;
  margin: 0 auto 40px;

}
.popbox .pop-right .right-box .img-status img {
  width: 100%;
}
.popbox .pop-right .right-box .enter-bottom {
  margin-top: 40px;
}
.popbox .pop-right .right-box .enter-bottom .button1 {
  width: 120px;
  height: 44px;
  background: #00bfd6;
  border-radius: 6px;
  color: #fff;
}

>>>.el-icon-close:before {
    content: "\e78d";
}
>>> .el-dialog__header {
  padding: 0;
}
>>> .el-dialog__header .el-dialog__headerbtn {
  top: -20px;
  right: -80px;
  width: 40px;
  height: 40px;
  font-size: 40px;
  /* background: rgba(255, 255, 255, 0.3); */
  border-radius: 50%;
  opacity: .8;
}
>>>.el-image-viewer__btn{
/* background: rgba(255, 255, 255, 0.3); */
}
>>>.el-image-viewer__close{
color: #fff;
}
>>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
>>> .el-dialog {
  /* margin-top: 8vh !important; */
  margin: 5vh auto !important;
  width: 1620px;
  background-color: transparent;
}
.el-dialog__wrapper {
  z-index: 10000 !important;
  background: rgba(0, 0, 0, 0.7);
}
.arrow-left,
.arrow-right {
  position: fixed;
  color: #fff;
  bottom: 10%;
  cursor: pointer;
  z-index: 999;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  background: #ffffff;
  border-radius: 50%;
 background: rgba(0, 0, 0, 0.3);
}
.arrow-left {
  left: 20px;
}
.arrow-left img,
.arrow-right img {
  vertical-align: middle;
  width: 13px;
  height: 24px;
}

.arrow-right {
  right: 40px;
  /* margin-right: 40px; */
}
.text {
  margin-top: 10px;
  font-size: 12px;
  color: #ffffff;
  line-height: 32px;
  opacity: 0.3;
}
.arrow-left:hover .text,
.arrow-right:hover .text {
  opacity: 1;
}
</style>
